 <template>
  <a-modal
    width="70%"
    v-model="modal2Visible"
    title="远程监控"
    centered
    @ok="() => (modal2Visible = false)"
  >
    <a-row>
      <a-col :span="24">
        <div style="display: flex;align-items: center;justify-content: space-between">
          <p style="font-size: 18px;font-weight:bolder;letter-spacing: 2px;display: flex;align-items: center">
            <img style="margin-right: 10px" src="../../assets/icon/icon-12.png">
            首部泵房运行情况</p>
          <p style="cursor: pointer" @click="$router.push('/wfinfo/monitoring/dataMonitoring')">查看全部></p>
        </div>
        <a-col :span="12">
          <a-card title="一号泵房">
            <a-card-grid style="width:25%;text-align:center">
              进口压力 <span style="color: #1D79FA">{{ oneJyl.substring(0, 6) }}</span>
            </a-card-grid>
            <a-card-grid style="width:25%;text-align:center">
              出口压力 <span style="color: #1D79FA">{{ oneCyl.substring(0, 6) }}</span>
            </a-card-grid>
            <a-card-grid style="width:25%;text-align:center">
              过滤前压力 <span style="color: #1D79FA">{{ oneQyl.substring(0, 3) }}</span>
            </a-card-grid>
            <a-card-grid style="width:25%;text-align:center">
              过滤后压力 <span style="color: #1D79FA">{{ oneHyl.substring(0, 3) }}</span>
            </a-card-grid>
            <a-card-grid style="width:25%;text-align:center">
              前阀状态 <span style="color: #1D79FA">{{
                oneQFm == '1' ? '开' : oneQFms == '1' ? '关' : oneQFm == '0' && oneQFms == '0' ? '半开' : ''
              }}</span>
            </a-card-grid>
            <a-card-grid style="width:25%;text-align:center">
              后阀状态 <span style="color: #1D79FA">{{
                oneHFm == '1' ? '开' : oneHFms == '1' ? '关' : oneHFm == '0' && oneHFms == '0' ? '半开' : ''
              }}</span>
            </a-card-grid>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="二号泵房">
            <a-card-grid style="width:25%;text-align:center">
              进口压力 <span style="color: #1D79FA">{{ twoJyl.substring(0, 6) }}</span>
            </a-card-grid>
            <a-card-grid style="width:25%;text-align:center">
              出口压力 <span style="color: #1D79FA">{{ twoCyl.substring(0, 6) }}</span>
            </a-card-grid>
            <a-card-grid style="width:25%;text-align:center">
              过滤前压力 <span style="color: #1D79FA">{{ twoQyl.substring(0, 3) }}</span>
            </a-card-grid>
            <a-card-grid style="width:25%;text-align:center">
              过滤后压力 <span style="color: #1D79FA">{{ twoHyl.substring(0, 3) }}</span>
            </a-card-grid>
            <a-card-grid style="width:25%;text-align:center">
              前阀状态 <span style="color: #1D79FA">{{
                twoQFm == '1' ? '开' : twoQFms == '1' ? '关' : twoQFm == '0' && twoQFms == '0' ? '半开' : ''
              }}</span>
            </a-card-grid>
            <a-card-grid style="width:25%;text-align:center">
              后阀状态 <span style="color: #1D79FA">{{
                twoHFm == '1' ? '开' : twoHFms == '1' ? '关' : twoHFm == '0' && twoHFms == '0' ? '半开' : ''
              }}</span>
            </a-card-grid>
          </a-card>
        </a-col>
        <!--        <a-table :columns="columnsTop" :rowKey="(record,index)=>{return index}" :pagination="false"-->
        <!--                 :data-source="pumpHouseDateList"-->
        <!--                 bordered></a-table>-->
      </a-col>
      <a-col :span="12" style="margin-top: 20px">
        <p style="font-size: 18px;font-weight:bolder;letter-spacing: 2px;display: flex;align-items: center">
          <img style="margin-right: 10px" src="../../assets/icon/icon-12.png">
          片区阀门控制</p>
      </a-col>
      <a-col :span="12" style="text-align: right;margin-bottom: 15px;margin-top: 20px">
        <a-button style="background: #3865E5;color: #fff" @click="$router.push('/wfinfo/valveControl/valueList')">控制
        </a-button>
      </a-col>
      <!--      style="height: 300px;overflow: auto"-->
      <a-col :span="12">
        <a-table
          bordered
          :rowKey="(record,index)=>{return index}"
          :columns="columns"
          :pagination="false"
          :scroll="{ y: 240 }"
          :data-source="temp"
        >
           <span slot="status" slot-scope="text, record" style="display: flex;align-items: center">
            <img
              style="margin-right: 5px"
              :src='record.deviceStatus == "ONLINE" ? require("../../assets/icon/zc.png"): require("../../assets/icon/yc.png")'>
            {{
               record.deviceStatus == "ONLINE" ? `正常` : '异常'
             }}
          </span>
        </a-table>
      </a-col>
      <a-col :span="12">
        <a-table
          bordered
          :rowKey="(record,index)=>{return index}"
          :columns="columns"
          :scroll="{ y: 240 }"
          :data-source="ranm"
          :pagination="false"
        >
           <span slot="status" slot-scope="text, record" style="display: flex;align-items: center">
            <img
              style="margin-right: 5px"
              :src='record.deviceStatus == "ONLINE" ? require("../../assets/icon/zc.png"): require("../../assets/icon/yc.png")'>
            {{
               record.deviceStatus == "ONLINE" ? `正常` : '异常'
             }}
          </span>
        </a-table>
      </a-col>
    </a-row>
  </a-modal>
</template>
<script>
import {pumpHouseDate, valveControl, overallSystem} from '@/api/device'

export default {
  data() {
    return {
      modal2Visible: false,
      temp: [],
      ranm: [],
      zongArr: [],
      columns: [
        {
          title: '阀门',
          dataIndex: 'deviceName',
        },
        {
          title: '当前状态',
          scopedSlots: {customRender: 'status'},
        },
      ],
      pumpHouseDateList: [],
      columnsTop: [
        {
          title: '泵进口压力',
          dataIndex: 'swj',
        },
        {
          title: '泵出口压力',
          dataIndex: 'dl',
        },
        {
          title: '阀门（前）状态',
          dataIndex: 'ssll',
        },
        {
          title: '阀门（后）状态',
          dataIndex: 'lj',
        },
        {
          title: '前阀压力',
          dataIndex: 'dy',
        },
        {
          title: '后阀压力',
        },
        {
          title: '阀门（后）状态',
        },
      ],
      expandedRowKeys: [],
      oneJyl: '',
      oneQFm: '',
      oneQFms: '',
      oneCyl: '',
      oneQyl: '',
      oneHyl: '',
      oneHFm: '',
      oneHFms: '',
      oneYx: '',

      twoYx: '',
      twoJyl: '',
      twoQFm: '',
      twoQFms: '',
      twoCyl: '',
      twoQyl: '',
      twoHyl: '',
      twoHFm: '',
      twoHFms: '',
    }
  },
  mounted() {
    this.pumpHouseDates()
    this.dataList()
  },
  methods: {
    setModal1Visible(modal1Visible) {
      this.modal1Visible = modal1Visible
    },
    pumpHouseDates() {
      overallSystem().then(res => {
        this.xsc = res.result.yw
        this.oneYx = res.result.waterOne[0].deviceValue
        this.oneQFm = res.result.waterOne[1].deviceValue
        this.oneQyl = res.result.waterOne[2].deviceValue
        this.oneHyl = res.result.waterOne[3].deviceValue
        this.oneJyl = res.result.waterOne[7].deviceValue
        this.flow = res.result.waterOne[10].deviceValue
        this.oneCyl = res.result.waterOne[8].deviceValue
        this.cumWater = res.result.waterOne[9].deviceValue
        this.oneHFm = res.result.waterOne[4].deviceValue
        this.oneHFms = res.result.waterOne[5].deviceValue

        this.twoQFms = res.result.waterTwo[0].deviceValue
        this.twoQFm = res.result.waterTwo[1].deviceValue
        this.twoQyl = res.result.waterTwo[2].deviceValue
        this.twoHyl = res.result.waterTwo[6].deviceValue
        this.twoJyl = res.result.waterTwo[7].deviceValue
        this.twoCyl = res.result.waterTwo[8].deviceValue
        this.twoHFms = res.result.waterTwo[5].deviceValue
        this.twoHFm = res.result.waterTwo[3].deviceValue
        this.twoFlow = res.result.waterTwo[9].deviceValue

        this.twoCumWater = res.result.waterTwo[10].deviceValue
      }).catch(err => {
      })
    },
    dataList() {
      valveControl().then(res => {
        this.zongArr = res.result
        this.zongArr.forEach((item, index) => {
          if (index % 2) {
            this.temp.push(item)
          } else {
            this.ranm.push(item)
          }
        })
      }).catch(err => {
      })
    }
  }
}
</script>

<style scoped>
/deep/ .ant-card-head-title {
  font-size: 18px;
  font-weight: bolder;
}
</style>